// 路由参数
import {useParams} from 'react-router-dom'
import {PutProduct,GetProductList} from '@/api/yp' //导入修改和获取接口
import {useState,useEffect} from 'react' 
import {useNavigate} from 'react-router-dom' //导航方法
// 01 导入接口，根据params.id 获取当前的商品
// 02 确定修改商品
function EditProduce() {
  // 创建导航
  const navigate = useNavigate();
  // 回显的商品信息
  const [product,setProduct] = useState({});
  // 获取路由参数
  const params = useParams();
  // 当路由参数发生变化，根据id获取需要回显的商品
  useEffect(()=>{
    GetProductList({id:params.id})
    .then(res=>{
      // 更新回显的商品
      setProduct(res.data.data[0])
    })
  },[params.id])
  // 修改
  function changeProduce(){
    PutProduct(product)
    .then(res=>{
      // 修改成功
      if(res.data.code==0){
        alert("修改成功");
        // location.hash="#/admin/produce/produceList";
        // history.back()
        // 返回
        navigate(-1);
      }
    })
  }
  return ( <div>
    {/* 显示参数 */}
    EditProduce {params.id}
    <p>商品名称：<input 
    value={product.productName}
    // 发生变化更新商品的名称
    onChange={e=>{setProduct({...product,productName:e.target.value})}}
    /> </p>
    <button onClick={changeProduce}>修改</button>
  </div> );
}

export default EditProduce;